<template>
    <div id="login">
        <h1>登录界面</h1>
        <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
        >
            <el-form-item label="账号" prop="user">
                <el-input v-model.number="ruleForm.user"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="pass">
                <el-input
                    type="password"
                    v-model="ruleForm.pass"
                    autocomplete="off"
                ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')"
                    >提交</el-button
                >
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
        <router-link to="/register" active-class="active"
            >没有账号？去注册</router-link
        >
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapActions, mapState } = createNamespacedHelpers("login");
export default {
    data() {
        var checkAge = (rule, value, callback) => {
            if (!value) {
                return callback(new Error("年龄不能为空"));
            }
            setTimeout(() => {
                if (typeof value == String) {
                    callback(new Error("请输入字符串"));
                } else {
                    callback();
                }
            }, 1000);
        };
        var validatePass = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入密码"));
            } else {
                if (this.ruleForm.checkPass !== "") {
                    this.$refs.ruleForm.validateField("checkPass");
                }
                callback();
            }
        };
        return {
            ruleForm: {
                pass: "",
                checkPass: "",
                user: "",
            },
            rules: {
                pass: [{ validator: validatePass, trigger: "blur" }],
                // checkPass: [{ validator: validatePass2, trigger: "blur" }],
                user: [{ validator: checkAge, trigger: "blur" }],
            },
        };
    },
    methods: {
        // 引入登录
        ...mapActions(["Login"]),
        // 点击登录触发登录函数，发送到后端
        async clickLogin() {
            const result = await this.Login({
                usersname: this.usersname,
                password: this.password,
            });
            if (result.status) {
                console.log(result.message);
                // 当登录成功后我们将后端发过来的token保存在本地
                localStorage.setItem("token", result.token);
                this.$router.push(`/system`);
            }
        },
        // element配件
        submitForm(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    // console.log(this.ruleForm.pass, this.ruleForm.user);
                    const result = await this.Login({
                        usersname: this.ruleForm.user,
                        password: this.ruleForm.pass,
                    });
                    if (result.status) {
                        console.log(result.message);
                        // 当登录成功后我们将后端发过来的token保存在本地
                        localStorage.setItem("token", result.token);
                        this.$router.push(`/system/StudentsList`);
                    }
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
    },
    computed: {
        ...mapState(["count"]),
    },
};
</script>

<style lang="scss">
body {
    margin: 0;
    text-align: center;
}
#login h1 {
    margin: 0;
    margin-bottom: 20px;
    padding: 0px 20px;
    height: 80px;
    text-align: center;
    line-height: 80px;
    color: rgb(66, 0, 63);
    background-image: linear-gradient(
        30deg,
        rgba(94, 255, 0, 0.5),
        rgba(29, 13, 0, 0.5) 100%
    );
}
.active {
    color: red;
}
.el-form {
    width: 500px;
    height: auto;
    margin: auto;
}
</style>